<template>
	<view class="approval">
		<!-- <view class="tips" v-if="!flag">
			<view>当前暂无审批记录</view>
		</view> -->
		<uni-list>
			<block v-for="(item,index) in approvalData" :key="index">
				<uni-list-item 
				:title="item.hr_attend_typeCard+'补卡申请'" 
				:note="item.hr_attend_apply_reason"
				:show-badge="true"
				:badge-text="item.hr_attend_status == 1?'未审核':item.hr_attend_status == 2?'已驳回':'已同意'"
				:badge-type="item.hr_attend_status == 1?'primary':item.hr_attend_status == 2?'error':'success'"
				@click="clickCard(item.hr_attend_apply_id)"></uni-list-item>
			</block>
		</uni-list>
	</view>
</template>s

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import {apiGetNews} from '@/common/api.js'
	export default{
		components:{
			uniList,
			uniListItem
		},
		data(){
			return {
				approvalData:[],
				flag:false
			}
		},
		onPullDownRefresh(){
			setTimeout(()=>{
				this.getNews()
			}, 1000);
		},
		onShow () {
			uni.showLoading({
				title: '数据加载中...',
				mask: true
			});
			this.getNews()
		},
		methods:{
			clickCard(e) {
				uni.navigateTo({
					url:'./handle?apply_id=' + e
				})
			},
			getNews(){
				apiGetNews().then(res=>{
					console.log(JSON.stringify(res))
					uni.hideLoading()
					uni.stopPullDownRefresh()//有下拉刷新会关闭下拉刷新
					this.approvalData = res.data.data
					if(this.approvalData.length == 0 ){
						this.flag = false
					}else{
						this.flag = true
					}
				}).catch(err=>{
					uni.hideLoading()
					uni.stopPullDownRefresh()//有下拉刷新会关闭下拉刷新
					this.toast('数据异常,请下拉刷新重试')
				})
			},
			toast(title,icon='none'){
				uni.showToast({
					title: title,
					mask: true,
					icon:icon,
					duration: 1500
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.approval{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		&-item{
			
		}
	}
	
	.tips{
		width: 100%;
		display: flex;
		margin-top: 30%;
		align-items: center;
		justify-content: center;
		
	}
</style>
